<template>
	<zui-box>
		<zui-navbar></zui-navbar>
		<u-gap height="20rpx"></u-gap>
		<view class="big_title">切换账号登录</view>
		<u-gap height="10rpx"></u-gap>
		<view class="user_box">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="avatar_box"><zui-avatar size="112rpx" :src="item.user.avatar"></zui-avatar></view>
				<view class="phone">{{ item.mobile | toTel }}</view>
				<view class="tag_box"><u-tag text="登录此账号" type="warning" size="mini" shape="circle" @click="logindata(item)"></u-tag></view>
			</view>
		</view>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			device_id: '',
			list: []
		};
	},
	filters: {
		toTel(str) {
			let start = str.slice(0, 4);
			let end = str.slice(-4);
			return `${start}****${end}`;
		}
	},
	onLoad() {
		let that = this;
		uni.getSystemInfo({
			success: function(res) {
				console.log(res);
				that.device_id = res.deviceId;
			}
		});
	},
	onShow() {
		this.get_info();
	},
	methods: {
		get_info() {
			uni.$u.http
				.get(`/app/user/getAccountList?device_id=${this.device_id}`, {
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.list = res;
				})
				.catch(err => {});
		},
		logindata(data) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定要登录此账号?',
				success: function(res) {
					if (res.confirm) {
						uni.$u.http
							.post(
								`/app/user/switchAccount`,
								{
									bind_id: data.id,
									device_id: that.device_id
								},
								{
									custom: {
										auth: true,
										toast: true,
										catch: true
									}
								}
							)
							.then(res => {
								uni.showToast({
									title: '切换成功',
									icon: 'none'
								});
								that.xz_set('token', res.token);
								setTimeout(() => {
									uni.navigateBack();
								}, 10);
							})
							.catch(err => {});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.big_title {
	color: #fff;
	padding: 0 40rpx;
	font-size: 48rpx;
	text-align: left;
	box-sizing: border-box;
}

.sm_title {
	color: #9d97a7;
	padding: 0 40rpx;
	font-size: 26rpx;
	text-align: left;
	box-sizing: border-box;
}

.tag_box {
	/deep/.u-transition {
		display: inline-block !important;
	}
}

.user_box {
	.item {
		display: flex;
		align-items: center;
		padding: 40rpx;
		.avatar_box {
			margin-right: 40rpx;
		}
		.phone {
			font-size: 30rpx;
			margin-right: 36rpx;
			color: #fff;
		}
	}
}
</style>
